<template>
  <div>
    <el-button
      v-if="moduleNameOptions&&activePageForm&&activePageForm.activeModuleIndex!=null&&(
        !moduleNameOptions[activePageForm.modules[activePageForm.activeModuleIndex].type].maxSize||
        activePageForm.modules[activePageForm.activeModuleIndex].modules.length<moduleNameOptions[activePageForm.modules[activePageForm.activeModuleIndex].type].maxSize)"
      type="primary"
      size="small"
      round
      @click="add"
    >新增内容
    </el-button>

    <!-- 未配置数据相关内容 -->
    <div
      v-if="activePageForm.modules[activePageForm.activeModuleIndex].modules.length === 0"
      class="empty-tips"
    >
      未配置数据
    </div>

    <!-- 站内链接 -->
    <template v-else>
      <ul>
        <draggable
          :list="
            activePageForm.modules[activePageForm.activeModuleIndex].modules
          "
          :options="{ filter: '.undrag' }"
          @change="moduleDragChange"
        >
          <li
            v-for="(item, index) in activePageForm.modules[
              activePageForm.activeModuleIndex
            ].modules"
            :key="index"
            class="link-container"
          >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <div class="flexRBC">
                  <div>
                    <span v-if="item.title" style="fontWeight: bold; line-height: 32px"> {{ index + 1
                    }}.&nbsp;&nbsp;{{ item.title }}</span>
                    <div v-else-if="item.bg" class="flexRSC">
                      <span style="fontWeight: bold; line-height: 32px"> {{ index + 1 }}.&nbsp;&nbsp;</span>
                      <el-image :src="fileBaseUrl + item.bg" class="title-bg" />
                    </div>
                    <span v-else style="fontWeight: bold; line-height: 32px"> {{ index + 1 }}. </span>
                  </div>
                  <div>
                    <el-button size="mini" round type="primary" @click="edit(item, index)">编辑</el-button>
                    <el-button size="mini" round type="danger" @click="del( index)">删除</el-button>
                    <el-button size="mini" round>拖拽排序</el-button>
                  </div>
                </div>
              </div>
              <div class="flexRBC">
                <div v-if="item.pic" class="pic-box">
                  <el-image :src="fileBaseUrl + item.pic" fit="contain" />
                </div>
                <div class="content-box">
                  <div>
                    <div v-if="item.title" class="flexRSS cell-item">
                      <div class="label">主标题：</div>
                      <div claa="value">{{ item.title }}</div>
                    </div>
                    <div v-if="item.subTitle" class="flexRSS cell-item">
                      <div class="label">副标题：</div>
                      <div claa="value">{{ item.subTitle }}</div>
                    </div>
                    <div v-if="item.dump.type" class="flexRSS cell-item">
                      <div class="label">跳转类型：</div>
                      <div claa="value">
                        {{ dumpTypeOptions[item.dump.type] || "无" }}
                      </div>
                    </div>
                    <div v-if="item.dump.type" class="flexRSS cell-item">
                      <div class="label">跳转链接：</div>
                      <div class="value">
                        <span v-if="item.dump.type === 'EMPTY'">无</span>
                        <span v-if="item.dump.type === 'INSIDE'">{{
                          item.dump.insideParams.remark || ""
                        }}</span>
                        <span
                          v-if="
                            item.dump.type === 'FEATURE' &&
                              item.dump.feature === 'CALL'
                          "
                        >手机功能 > 拨打电话 >
                          {{ item.dump.featureParams.phone }}</span>
                        <span
                          v-if="
                            item.dump.type === 'FEATURE' &&
                              item.dump.feature === 'CONTACT'
                          "
                        >手机功能 > 微信客服助手</span>
                        <span v-if="item.dump.type === 'WXAPP'">小程序 > {{ item.dump.appId }} >
                          {{ item.dump.path }}</span>
                        <span v-if="item.dump.type === 'URL'">自定义链接 > {{ item.dump.url }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="handle-box">
                  <el-button type="primary" size="small" round @click="edit(item, index)">编辑</el-button>
                  <el-button type="danger" size="small" round @click="del(index)">删除</el-button>
                  <el-button v-if="
                      activePageForm.modules[activePageForm.activeModuleIndex]
                        .modules.length > 1
                    " icon="el-icon-sort" size="small" round>拖拽排序</el-button>
                </div> -->
              </div>
            </el-card>
          </li>
        </draggable>
      </ul>
    </template>

    <!-- 组件 -->
    <DialogDump ref="dialogDump" />
    <DialogSmall ref="dialogSmall" />
  </div>
</template>

<script>
import DialogDump from './DialogDump'
import DialogSmall from '../components/DialogSmall.vue'
import wxaBuildConfig from '@/views/wxaBuildModule/config'
import { mapGetters } from 'vuex'
import draggable from 'vuedraggable'

export default {
  components: {
    DialogDump,
    draggable,
    DialogSmall
  },

  data() {
    return {
      // 配置
      dumpTypeOptions: {},
      moduleNameOptions: null,
      // 状态
      // 数据
      classifyCode: 'DEFAULT'
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'activePageForm'])
  },
  watch: {},
  created() {
  },
  mounted() {
    this.$bus.$on('__SMALL', this.__SMALL)
    this.dumpTypeOptions = wxaBuildConfig[this.classifyCode].dumpType
    this.moduleNameOptions = wxaBuildConfig[this.classifyCode].moduleName
    // this.fetchData();
  },
  destroyed() {
    this.$bus.off('__SMALL')
  },
  methods: {
    __SMALL() {
      const dialogSmall = this.$refs.dialogSmall
      let { height }  = this.activePageForm.modules[this.activePageForm.activeModuleIndex]
      dialogSmall.open(height).then(res => (this.activePageForm.modules[this.activePageForm.activeModuleIndex].height = res))
    },
    /**
     * 数据组
     */
    // 初始化模块数据
    // fetchData() {
    // if (!this.activeModule.hasOwnProperty("form")) {
    //   this.form.type = this.activeModule.key;
    //   this.activeModule.form = this.form;
    // }
    // console.log(this.activeModule);
    // },

    /**
     * 按钮组
     */
    // 新增
    add() {
      this.$refs.dialogDump.open({ mode: 'add' }).then((res) => {
        this.activePageForm.modules[
          this.activePageForm.activeModuleIndex
        ].modules.push(res)
        this.$forceUpdate()
      })
    },

    // 编辑
    edit(item, index) {
      this.$refs.dialogDump.open({ mode: 'edit', row: item }).then((res) => {
        this.activePageForm.modules[
          this.activePageForm.activeModuleIndex
        ].modules[index] = res
        this.$forceUpdate()
      })
    },

    // 删除
    del(index) {
      this.activePageForm.modules[
        this.activePageForm.activeModuleIndex
      ].modules.splice(index, 1)
      this.$forceUpdate()
    },

    // 拖拽
    moduleDragChange(val) {
      console.log(val)
      this.$forceUpdate()
    }

    /**
     * 状态组
     */

    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 格式化 */
::v-deep {
  .el-card__body {
    padding: 10px;
  }

  .el-card__header {
    padding: 10px 20px;
  }
}

/* 空的 */
.empty-tips {
  margin-top: 100px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

.link-container {
  margin-top: 10px;
  cursor: move;

  .title-bg {
    width: 188px;
    height: 33px;
  }

  .pic-box {
    margin-right: 10px;
    flex: 0 0 100px;
    height: 100px;
  }

  .content-box {
    flex: 1;
    margin-right: 10px;
    font-size: 14px;

    .cell-item {

      .label {
        flex: 0 0 80px;
        text-align: right;
      }
    }
  }

  .handle-box {
    // flex: 0 0 40px;
    text-align: right;
  }
}
</style>
